<template>
  <div :id="uuId" :style="style"></div>
</template>

<script setup lang="ts">
import { ref,computed,onMounted, reactive,watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  width:{
    type:String,
    default:'600px'
  },
  height:{
    type:String,
    default:'400px'
  },
  options:{
    type:Object,
    default:{}
  }
})

const style = computed(() => {
  return {
    width:props.width,
    height:props.height
  }
})

const uuid = () => {
  var s:any = [];
  var hexDigits = "0123456789abcdef";
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substring(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substring((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "-";

  var uuid = s.join("");
  return uuid;
};
let myCharts:any
const uuId = uuid()
let optionsOwn = {
  tooltip:{
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      z: 0,
      lineStyle: {
        color: '#2D3443'
      }
    }
  },
  grid:{
    top:'10%',
    left:'10%',
    right:'10%',
    bottom:'10%',
    show: false,
    containLabel: true // 距离是包含坐标轴上的文字
  }
}
onMounted(() => {
  let dom:any = document.getElementById(uuId);
  myCharts = echarts.init(dom)
  myCharts.setOption(Object.assign(optionsOwn,props.options) );
})

watch(() => props.width, (newValue, oldValue) => {
  if (myCharts) {
    myCharts.resize()
  }
})
watch(() => props.options, (newValue, oldValue) => {
  if (myCharts) {
    myCharts.setOption(props.options)
  }
})
</script>

<style scoped></style>
